import React,{Component} from 'react';
import {Link, Route} from "react-router-dom";
import { List } from 'antd-mobile';
import "../Message/Message.css"
import iconAt from './msg-icon/msg-@.png'
import iconLikes from './msg-icon/msg-thumb.png'
import iconFollows from './msg-icon/msg-friend.png'
import iconComments from './msg-icon/msg-comment.png'
import iconLetters from './msg-icon/msg-letter.png'
import iconUsers from './msg-icon/profile-photo.png'

const Item = List.Item;
const Brief=Item.Brief;

export default class Message extends React.Component {
    state = {
        disabled: false,
    }
    render(){
        return(
            <div className='message-list' style={{height:'91vh',overflowY:'scroll'}}>
                <List>
                    <Item align="top" thumb={iconUsers} multipleLine>
                        消息提醒
                    </Item>
                    <Item
                        thumb={iconAt}
                        arrow="horizontal"
                        onClick={() => {this.props.history.push('/terran/atme')}}
                    >@我的
                    </Item>
                    <Item
                        thumb={iconLikes}
                        arrow="horizontal"
                        onClick={() => {this.props.history.push('/terran/likes')}}
                    >收到的赞</Item>
                    <Item
                        thumb={iconFollows}
                        arrow="horizontal"
                        onClick={() => {this.props.history.push('/terran/follows')}}
                    >好友关注</Item>
                    <Item
                        thumb={iconComments}
                        arrow="horizontal"
                        onClick={() => {this.props.history.push('/terran/comments')}}
                    >评论回复</Item>
                    <Item
                        thumb={iconLetters}
                        arrow="horizontal"
                        onClick={() => {this.props.history.push('/terran/letters')}}
                    >私信</Item>

                </List>
                <List renderHeader={() => '历史记录'} className="my-list">
                    <Item extra="10:30" align="top" thumb={iconUsers} multipleLine>
                        用户1 <Brief>评论了你的动态：评论内容</Brief>
                    </Item>
                    <Item extra="一天前" align="top" thumb={iconUsers} multipleLine>
                        用户2 <Brief>评论了你的动态：评论内容</Brief>
                    </Item>
                    <Item extra="一天前" align="top" thumb={iconUsers} multipleLine>
                        用户3 <Brief>评论了你的动态：评论内容</Brief>
                    </Item>
{/*                    <Item extra="一天前" align="top" thumb={iconUsers} multipleLine>
                        用户4 <Brief>评论了你的动态：评论内容</Brief>
                    </Item>*/}
                </List>
            </div>
        )
    }
}
